<div id="textoMiPerfil">
	<p style="font-size: 15px" class="lead col-sm-offset-2"> Puede modificar su información personal <br>
	</p>
</div>

<form  class="form-horizontal" role="form" method="post" id="formulario">
	<div class="form-group">
		<label  for="nombre" class="col-xs-3 col-sm-2 control-label">Nombre</label>
		<div class="col-xs-10 col-sm-2">
			<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre"/> 
		</div>
	</div>
	
	<div class="form-group">
		<label for="apellidos" class="col-xs-3 col-sm-2 control-label" >Appellidos</label>
		<div class="col-xs-10 col-sm-2 ">
			<input type="text" class="form-control " id="apellidos" name="apellidos" placeholder="Apellidos"/>
		</div>
	</div>
	
	<div class="form-group">
		<label for="mail" class="col-xs-3 col-sm-2 control-label" >Email</label>
		<div class="col-xs-10 col-sm-2">
			<input type="email" class="form-control " id="mail" name="mail" placeholder="email"/>
		</div>
	</div>
	
	<div class="form-group">
		<label for="apodo" class="col-xs-3 col-sm-2 control-label" >Apodo</label>
		<div class="col-xs-10 col-sm-2">
			<input id="apodo" type="text" class="form-control " name="apodo" placeholder="Usuario" /> 
		</div>
	</div>
	<div class="form-group">
		<label for="password" class="col-xs-2 col-sm-2 control-label" >Contraseña</label>	
		<div class="col-xs-10 col-sm-2" >
			<input type="password" class="form-control " id="password" name="password" placeholder="Contraseña"/>
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10 col-xs-offset-2 col-xs-6">
			<button type="submit" class="btn btn-primary">Guardar</button>
		</div>
	</div>
</form>
<script>

$(document).one("ajaxComplete", cargarUsuario);
var id;
function cargarUsuario() {
	
	var urlUsuario = "../dispatcher/usuario/recuperarUsuario";
	$.getJSON(urlUsuario, function(data) {
		id = data.id;
		$("#nombre").val(data.nombre);
		$("#apellidos").val(data.apellidos);
		$("#apodo").val(data.apodo);
		$("#mail").val(data.mail);
		$("#password").val(data.password);
	});
}
	
// Para hacer el submit del formulario
$("#formulario").submit(function(event) {
	 
	event.preventDefault();
	
	verificarApodo();
	
	
}); 

function verificarApodo() {
	var apodo = $("#apodo").val();
	
	/*Verifico que es mi turno*/
	var urlValidarUsuario = "../dispatcher/usuario/validarNuevoApodo";
	urlValidarUsuario += "?username=" + apodo ;
	$.getJSON(urlValidarUsuario, function(existe){
 		
		if (existe == true) {
			alert(" Elige otro apodo ");
		} else {
 			submitFormulario();
 		}
	});
}

function submitFormulario() {
	
	var data = $('#formulario').serializeObject();
	data.id = id;
	$.ajax({
		type: "POST",
		 url: "../dispatcher/usuario/modificarUsuario",
		 data: JSON.stringify($('#formulario').serializeObject()),
		 beforeSend: function(xhr) {  
		     xhr.setRequestHeader("Accept", "application/json");  
		     xhr.setRequestHeader("Content-Type", "application/json");  
		 },  
		 success: function (datos) {
             alert("Modificación registrada");
    	 },
		 error : function (data, status, er) {
		 	alert("error" + data + " status " +status+" er:"+er );
		 }
	 }); 
}

</script>